<script lang="ts" setup>
	import { getCurrentInstance, ref } from 'vue'
	import { onPageScroll, onReady } from '@dcloudio/uni-app'
	import { useScrollUpdownBottomContent } from '@/hooks'
	import { useSubPage } from './composables'
	const {
		navBarInfo,
		userInfo,
		loginHandle,
		navUserInfoPage,
		navCommonProblemPage,
		navMemberRightsPage,
		navOrderListPage,
		navbarInitFinishHandle
	} = useSubPage()
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	// 翻译事件引入
	var plugin = requirePlugin("WechatSI")
	let manager = plugin.getRecordRecognitionManager()
	const text = ref<string>('开始录音')
	const voicePath = ref<string>('')
	const shows = ref<boolean>(false)
	const animation = ref<boolean>(false)
	const voiceState = ref<string>('')
	const endOne = ref<string>('')
	const num = ref<number>(1)
	const recognitionType = ref<number>(1)
	const recordList = ref<Array>([{
		type:1,
		origin:'Hello，小明222',
		result:'HELLO,XIAO MING',
		filename:'123.MP3'
	},{
		type:2,
		origin:'你好，小明',
		result:'HELLO,XIAO MING',
		filename:'123.MP3'
	}])
	// 1 Chinese中文   2.English 英文
	const startRecord = (type:number) => {
		console.log("开始")
		recognitionType.value = type
		manager.start({
			duration: 30000,
			lang: "zh_CN",
			format: 'pcm', // 音频格式
			frameSize:50
		})
		text.value = '松手上传';
		animation.value = true
	}
	const endRecord = () => {
		console.log("结束")
		text.value = '开始录音';
		animation.value = false
		shows.value = true
		manager.stop();
		setTimeout(function () {
			fanyi()
		}, 1000)
	}
	// 翻译成对应的版本
	const fanyi = () => {
		endOne.value = voiceState.value
		if(!voiceState.value){
			return;
		}
		let lfrom = recognitionType.value == 1  ?'zh_CN' : 'en_US'
		let lto = recognitionType.value == 1  ?'en_US' : 'zh_CN'
		plugin.translate({
			lfrom: lfrom,
			lto: lto,
			content: voiceState.value,
			tts: true,
			success: (resTrans : any) => {
				recordList.value.push({
					type:recognitionType.value,
					origin:resTrans.origin,
					result:resTrans.result,
					filename:resTrans.filename
				})
				setTimeout(function(){
					uni.pageScrollTo({
					    scrollTop: 10000, // 假设页面很长，滚动到一个很大的值，从而滚动到底部
					    duration: 300 // 滚动动画时长，默认300ms
					},500);
				})
			}
		})
		// num.value = num.value + 1
	}
	const initRecord = () => {
		manager.onStart = function (res:any) {
			// voiceState.value = "onStart:" + res.msg + "正在录音"
		};
		//有新的识别内容返回，则会调用此事件
		manager.onRecognize = (res:any) => {
			voiceState.value = res.result;
		}
		manager.onFrameRecorded = (res:any) => {
			console.log(res,"eeeeeeeeeee")
		}
		// 识别结束事件
		manager.onStop = (res:any) => {
			console.log(res,"onStop")
			voicePath.value = res.tempFilePath;
			voiceState.value = res.result;
			if (voiceState.value == '') {
				endOne.value = '周围太安静啦~再试试~';
			}
		}

		// 识别错误事件
		manager.onError = (res) => {
			// voiceState.value = '翻译员去吃饭啦，等下再试试';
			shows.value = false
			uni.showToast({
				title: '未检测到,请重新翻译',
				icon: 'error',
				duration: 2000, //持续时间为 2秒
			})
		}
	}
	initRecord()
	// 转化为英文
	const handlePlay = (filename:string) => {
		let music = null;
		music = uni.createInnerAudioContext(); //创建播放器对象
		music.src = filename;
		music.play(); //执行播放
		music.onEnded(() => {
			//播放结束
			music = null;
		});
	}
	const { style: authInfoScrollStyle, scrollHandle: authInfoScrollHandle } =
		useScrollUpdownBottomContent('up', 80)

	onReady(() => {
		uni.pageScrollTo({
		    scrollTop: 10000, // 假设页面很长，滚动到一个很大的值，从而滚动到底部
		    duration: 300 // 滚动动画时长，默认300ms
		});
	})
	onPageScroll((e) => {
	})
</script>

<template>
	<TnNavbar fixed :bottom-shadow="false" :placeholder="false" title="续费" @init-finish="navbarInitFinishHandle">
		<view class="tn-color-black">英汉互译</view>
	</TnNavbar>
	<!-- 顶部背景 -->
	<view class="top-bg" />
	<!-- 页面内容 -->
	<view class="page" :style="{ paddingTop: `${navBarInfo.height + 12}px` }">

		<scroll-view class="tn-text-justify"  scroll-top="10000">
			<view class="tn-margin" v-for="(item,index) in recordList" :key="index">
				<view class="tn-flex tn-flex-row-between tn-flex-col-center" v-if="item.type == 1">
					<view class="justify-content-item">
						<view class="tn-flex tn-flex-col-top tn-flex-row-left">
							<view class="logo-pic tn-margin-top-sm"
								style="background-image:url('https://cdn.nlark.com/yuque/0/2022/jpeg/280373/1664005699053-assets/web-upload/8645ea3a-e0a9-4422-8364-cc5ede305c9f.jpeg')">
								<view class="logo-image">
								</view>
							</view>
							<view class="tn-padding-right tn-color-black">
								<view class="tn-flex tn-flex-col-center ">
									<view class="tn-margin-sm tn-padding-sm tn-orangered_bg"
										style="max-width: 62vw;border-radius: 0 20rpx 20rpx 20rpx;">
										<view class="">{{item.origin}}</view>
										<view class="tn-flex mt-6" @tap="handlePlay(item.filename)">
											<view class="mr-8">{{item.result}}</view>
											<TnIcon name="like-lack" />
										</view>
									</view>
									<view class=""></view>
								</view>
							</view>
						</view>
					</view>
					<view class="justify-content-item"></view>
				</view>
				<view class="tn-flex tn-flex-row-between tn-flex-col-center" v-if="item.type == 2">
					<view class="justify-content-item"></view>
					<view class="justify-content-item">
						<view class="tn-flex tn-flex-col-top tn-flex-row-left">
							<view class="tn-padding-left tn-color-black">
								<view class="tn-flex tn-flex-col-center">
									<view class="tn-margin-sm tn-padding-sm tn-gradient-bg__purplered tn-color-white"
										style="max-width: 62vw;border-radius: 0 20rpx 20rpx 20rpx;">
										<view class="">{{item.origin}}</view>
										<view class="tn-flex mt-6"  @tap="handlePlay(item.filename)">
											<view class="mr-8">{{item.result}}</view>
											<TnIcon name="like-lack" />
										</view>
									</view>
								</view>
							</view>
							<view class="logo-pic tn-margin-top-sm"
								style="background-image:url('https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1692940242409-assets/web-upload/fcc4eab6-b2ce-44eb-9165-c49b51f5f830.jpeg')">
								<view class="logo-image">
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 语音音阶动画 长按说话时的动画 -->
		<view class="prompt" v-if="animation">
			<section class="dots-container">
				<view class="dot"></view>
				<view class="dot"></view>
				<view class="dot"></view>
				<view class="dot"></view>
				<view class="dot"></view>
			</section>
			<text>录音中...</text>
		</view>
		<!-- 悬浮按钮-->
		<view class="operation-bar">
			<view class="news-bar">
				<button class="btn-container" @longpress="startRecord(1)" @touchend="endRecord">
					<view class="btn tn-orangered_bg">
						<view class="text">点击说中文</view>
						<!-- <view class="icon">
						  <TnIcon name="like-lack" />
						</view> -->
					</view>
				</button>
				<view class="btn-container" @longpress="startRecord(2)" @touchend="endRecord">
					<view class="btn tn-gradient-bg__purplered">
						<view class="text">Speak English</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	@import './styles/index.scss';
</style>